import ChartTitle from '@/components/Visual/chartTitle';
import { echartsResize } from '@/utils/echartsResize';
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';
import './index.less';
import type { ParkingTimes } from '../types';

function TimeDurationRate(props: { parkingTimes: ParkingTimes[] }) {
  // let charEle;
  const chartRef: any = useRef(null); //拿到eCharts容器
  const { parkingTimes } = props;
  const xAxisText = ['0.5小时内', '0.5~2小时', '2~6小时', '6~12小时', '12~24小时', '24小时以上'];
  const MyCubeRect = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
      width: 200, // 长方体宽
      zWidth: 8, // 阴影折角宽
      zHeight: 4, //阴影折角高
    },
    buildPath: function (ctx, shape) {
      const api = shape.api;
      const xAxisPoint = api.coord([shape.xValue, 0]);
      const p0 = [shape.x, shape.y];
      const p1 = [shape.x - shape.width / xAxisText.length, shape.y];
      const p4 = [shape.x + shape.width / xAxisText.length, shape.y];
      const p2 = [xAxisPoint[0] - shape.width / xAxisText.length, xAxisPoint[1]];
      const p3 = [xAxisPoint[0] + shape.width / xAxisText.length, xAxisPoint[1]];

      ctx.moveTo(p0[0], p0[1]); //0
      ctx.lineTo(p1[0], p1[1]); //1
      ctx.lineTo(p2[0], p2[1]); //2
      ctx.lineTo(p3[0], p3[1]); //3
      ctx.lineTo(p4[0], p4[1]); //4
      ctx.lineTo(p0[0], p0[1]); //0
      ctx.closePath();
    },
  });
  echarts.graphic.registerShape('MyCubeRect', MyCubeRect);

  const member: number[] = [];
  const normal: number[] = [];
  const custom: number[] = [];
  if (parkingTimes.length) {
    parkingTimes.slice(0, 6).forEach((item) => {
      member.push(item.memberCount);
      normal.push(item.normalCount);
    });
  }
  const max = Math.max(...member, ...normal); // 最大值 获取元素数组的长度 或 Math.max.apply(null, member)
  for (let i = 0; i < 6; i++) {
    custom.push(max + 1);
  }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      //提示框组件
      trigger: 'axis', //触发类型 柱状图
      backgroundColor: 'rgba(50,50,50,0.7)',
      axisPointer: { type: 'none' }, //触发效果 移动上去 背景效果
    },
    legend: {
      right: '38%',
      top: '0%',
      itemWidth: 8,
      itemHeight: 8,
      icon: 'rect',
      inverse: true,
      textStyle: {
        // 图例文字的样式
        color: '#fff',
        fontSize: 14,
        padding: [2, 0, 0, 2],
        fontWeight: 100,
      },
    },
    grid: {
      top: '15%',
      right: '10%',
      left: '10%',
      bottom: '10%',
      //   containLabel: true
    },
    xAxis: [
      //x轴
      {
        type: 'category', //坐标轴类型 离散
        data: xAxisText, //数据
        axisTick: false, //是否显示刻度
        axisLine: {
          //坐标轴样式
          show: true, //是否显示
          lineStyle: {
            //线的样式
            type: 'solid', //线的类型 虚线
            color: '#6C8097',
          },
        },
        axisLabel: {
          color: '#DEDEDE',
          interval: 0,
        },
      },
    ],
    yAxis: [
      //y轴
      {
        min: 0, //最小
        max: max + 1, //最大
        interval: 1, //相差
        name: '人', //名称
        type: 'value', //连续类型
        axisLine: {
          //坐标轴样式
          show: false, //不显示
        },
        splitLine: {
          //分隔辅助线
          lineStyle: {
            type: 'dashed', //线的类型 虚线0
            opacity: 0.2, //透明度
          },
        },
        axisLabel: {
          color: '#DEDEDE',
        },
      },
    ],
    series: [
      {
        name: '会员车辆', //名称
        type: 'bar', //类型
        barWidth: '11px', //宽度
        // barCategoryGap: '20%',
        data: member, //数值
        z: 2,
        // x: -20,
        itemStyle: {
          color: {
            //渐变色
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: 'linear',
            global: false,
            colorStops: [
              {
                offset: 0,
                color: '#66E1DF',
              },
              {
                offset: 1,
                color: 'rgba(0, 89, 84, 0.0001)',
              },
            ],
          },
        },
      },
      {
        name: '非会员车辆',
        type: 'bar',
        // barCategoryGap: '12' /*多个并排柱子设置柱子之间的间距*/,
        barWidth: '11px',
        // barGap: '12',
        barGap: '100%',
        // x: 30,
        data: normal,
        z: 2,
        itemStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: 'linear',
            global: false,
            colorStops: [
              {
                offset: 0,
                color: '#D0DEEE',
              },
              {
                offset: 1,
                color: 'rgba(208, 222, 238, 0.0001)',
              },
            ],
          },
        },
      },
      {
        name: '',
        type: 'custom',
        tooltip: {
          show: false,
        },
        renderItem: (params: any, api: any) => {
          const location = api.coord([api.value(0), api.value(1)]);
          return {
            type: 'group',
            children: [
              {
                type: 'MyCubeRect',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                },
                style: {
                  fill: '#333', // 0% 处的颜色
                  opacity: 0.3, //透明度,
                }, //api.style() 继承原本样式
              },
            ],
          };
        },
        data: custom,
      },
    ],
  };

  useEffect(() => {
    const initChart = () => {
      const char = document.getElementById('TimeDurationRate');
      if (char) {
        chartRef.current = echarts.init(char);
        // chartRef.current = charEle;
        chartRef.current.setOption(option as any);
        echartsResize(chartRef.current);
      }
    };
    // changeDay();
    initChart();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  useEffect(() => {
    if (chartRef.current) {
      chartRef.current.setOption(option as any);
    }
  }, [option, props]);
  return (
    <div className="TimeDurationRate">
      {/* <div style={{ color: '#fff' }}>{day}</div> */}
      <div className="title">
        <ChartTitle title="停车时长占比" />
        <img className="polyline" src="/visual/tabTitlePolyline.svg" alt="" />
        <img className="diamond" src="/visual/titleRectangle.svg" alt="" />
      </div>
      <div id="TimeDurationRate" className="chart" ref={chartRef} />
    </div>
  );
}

export default TimeDurationRate;
